<template>
    <up-navbar title="" :bgColor="`rgba(255,255,255,${scrollTop})`" :leftText="``" placeholder :autoBack="true"
        :leftIconColor="`rgb(${(1 - scrollTop) * 255},${(1 - scrollTop) * 255},${(1 - scrollTop) * 255})`">
        <template #left>
            <view class="w-[100%] flex items-center ">
                <view @click="navBack">
                    <up-icon name="arrow-left"
                        :color="`rgb(${(1 - scrollTop) * 255},${(1 - scrollTop) * 255},${(1 - scrollTop) * 255})`"
                        size="34rpx"></up-icon>
                </view>
                <view class="ml-[40rpx] donghua" :style="scrollTop >= 1 ? {
        opacity: 1
    } : { opacity: 0 }">
                    <up-icon name="list"
                        :color="`rgb(${(1 - scrollTop) * 255},${(1 - scrollTop) * 255},${(1 - scrollTop) * 255})`"
                        size="34rpx"></up-icon>
                </view>
            </view>
        </template>
        <template #center>
            <view class="text-[32rpx] font-[500]" :style="{
        color: `rgb(${(1 - scrollTop) * 255},${(1 - scrollTop) * 255},${(1 - scrollTop) * 255})`
    }">车源详情</view>
        </template>
    </up-navbar>
    <view :style="scrollTop >= 1 ? {
        opacity: 1,
        top: 44 + statusBarHeight + 'px'
    } : { opacity: 0 }"
        class="fixed donghua w-[100%] opacity-0 top-[90px] flex justify-center left-[0] z-[9999] bg-[#fff] h-[48px] pb-[4px]">
        <up-tabs inactiveStyle="font-size: 28rpx;color: #000000;"
            activeStyle="font-weight: 600;font-size: 28rpx;color: #000000;"
            :lineColor="`linear-gradient( 98deg, #FFF1B8 0%, #FFD856 100%)`" :list="tabs" @click="tabsClick"></up-tabs>
    </view>
    <view class="mt-[-44px]">
        <!-- 轮播图 -->
        <up-swiper :list="swiper" height="568rpx" @change="(e) => (swiperCurrent = e.current)">
            <template #indicator>
                <view class="w-[750rpx] relative">
                    <view
                        class="px-[24rpx] rounded-[8rpx] right-[32rpx] bottom-[78rpx] absolute py-[12rpx] bg-[#000] text-[#fff] text-[24rpx]">
                        {{ swiperCurrent + 1 }}/{{ swiper.length }}
                    </view>
                    <view
                        class="px-[24rpx] rounded-[8rpx] left-[32rpx] bottom-[78rpx] absolute py-[12rpx] bg-[#000] text-[#fff] text-[24rpx]">
                        车源编号：{{ carInfo?.vin  }}
                    </view>
                </view>
            </template>
        </up-swiper>
        <!-- 卡片 -->
        <view class="w-[100%] pb-[200rpx] relative">
            <view class="px-[32rpx] w-[100%]">
                <view
                    class="bg-[#fff] mb-[24rpx] pt-[22rpx] pr-[14rpx] pb-[32rpx] pl-[16rpx] rounded-[20rpx] mt-[-58rpx]">
                    <view class="text-[32rpx] font-[500] text-[#000] mb-[16rpx]">
                        {{ carInfo?.brandModel }}
                    </view>
                    <view class="flex items-center mb-[28rpx]">
                        <text class="text-[32rpx] text-[#FF0B0B]">{{ (carInfo?.price / 100).toFixed(0) }}万</text>
                        <image src="/static/images/pf/dj.png" class="w-[160rpx] h-[48rpx] ml-[16rpx]"></image>
                    </view>
                    <view class="flex justify-between items-center">
                        <view>
                            <view class="text-[24rpx] text-[#999] mb-[10rpx]">
                                发布时间：
                            </view>
                            <view class="text-[28rpx] text-[#000] font-bold">
                                {{ carInfo?.createTime }}
                            </view>
                        </view>
                        <view class="mr-[34rpx]">
                            <view class="text-[24rpx] text-[#999] mb-[10rpx]">
                                更新时间：
                            </view>
                            <view class="text-[28rpx] text-[#000] font-bold">
                                {{ carInfo?.updateTime }}
                            </view>
                        </view>
                    </view>
                </view>

                <view class="bg-[#fff] rounded-[20rpx] mb-[24rpx] pt-[22rpx] pr-[14rpx] pl-[16rpx]">
                    <view class="flex  mb-[28rpx] justify-between items-center">
                        <view class=" relative text-[32rpx] font-[500] text-[#000] flex">
                            <text class="z-[1]">车辆信息</text>
                            <text class=" absolute bottom-0 bg-[#FFEFB8] left-0 w-[84rpx] h-[8rpx]"></text>
                        </view>
                        <!-- <view class="flex items-baseline">
                            <text class="text-[#999] text-[24rpx] mr-[12rpx]">查看更多参数</text>
                            <up-icon name="arrow-right" color="#000" size="24rpx"></up-icon>
                        </view> -->
                    </view>
                    <view>
                        <view v-for="(item, index) in cardInfo" :key="index + 'cardInfo'" class="flex items-center">
                            <view v-for="(info, i) in item" :key="info.title"
                                class="w-[33%] flex justify-center items-center">
                                <view class="flex flex-col mb-[44rpx] items-center w-[100%]">
                                    <text class="text-[#999999] mb-[20rpx] text-[24rpx]">{{ info.title }}</text>
                                    <text class="text-[#000] text-[28rpx]">{{ info.content }}</text>
                                </view>
                                <view v-if="i != item.length - 1" class="w-[2rpx] h-[60rpx] bg-[#e9e9e9]"></view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="bg-[#fff] rounded-[20rpx] mb-[24rpx] pt-[20rpx]  pb-[24rpx] px-[14rpx]">
                    <view class="relative text-[32rpx] mb-[20rpx] font-[500] text-[#000]  flex">
                        <text class="z-[1]">车况描述及说明</text>
                        <text class=" absolute bottom-0 bg-[#FFEFB8] left-0 w-[84rpx] h-[8rpx]"></text>
                    </view>
                    <view class="text-[#999] text-[24rpx] mb-[20rpx]">*卖方填写，请以合同约定实际车况为准</view>
                    <view class="font-[400] text-[28rpx] text-[#000] mb-[20rpx]">
                        <text> {{ carInfo?.description }}</text>
                    </view>
                    <!-- <view class="flex flex-wrap items-center">
                        <view
                            class="px-[12rpx] py-[10rpx] bg-[#FFF9E4] text-[#82713A] text-[20rpx] mb-[12rpx] mr-[12rpx]">
                            一手车
                        </view>
                        <view
                            class="px-[12rpx] py-[10rpx] bg-[#FFF9E4] text-[#82713A] text-[20rpx] mb-[12rpx] mr-[12rpx]">
                            二手车
                        </view>
                        <view
                            class="px-[12rpx] py-[10rpx] bg-[#FFF9E4] text-[#82713A] text-[20rpx] mb-[12rpx] mr-[12rpx]">
                            十八手车
                        </view>
                    </view> -->
                </view>
                <!-- <view class="bg-[#fff] rounded-[20rpx] mb-[24rpx] pt-[20rpx]  pb-[30rpx] px-[14rpx]">
                    <view class="flex justify-between items-baseline">
                        <view class="relative text-[32rpx]  mb-[20rpx] font-[500] text-[#000] flex">
                            <text class="z-[1]">全国物流</text>
                            <text class="absolute bottom-0 bg-[#FFEFB8] left-0 w-[84rpx] h-[8rpx]"></text>
                        </view>
                        <view
                            class="w-[140rpx] h-[52rpx] text-center rounded-[8rpx] text-[24rpx] text-[#000] leading-[52rpx] border-[2rpx] border-solid border-[#ffefb8]">
                            查看价格
                        </view>
                    </view>
                    <view class="font-[400] text-[28rpx] text-[#000] mb-[20rpx]">
                        <text>*每台车赠送10万物流保险</text>
                    </view>
                    <view class="flex items-center">
                        <view class="flex items-center text-[28rpx] text-[#000]">
                            <image src="/static/images/pf/pf.png" class="w-[60rpx] h-[60rpx] rounded-[50%]"></image>
                            <text class="ml-[12rpx]">重庆</text>
                        </view>
                        <view class="flex mx-[18rpx] items-center">
                            <view class="w-[60rpx] h-[2rpx] bg-[#D4D4D4]"></view>
                            <view class="w-[18rpx] h-[18rpx] clip-sjx  bg-[#D4D4D4]"></view>
                        </view>
                        <view class="flex items-center text-[28rpx] text-[#000]">
                            <image src="/static/images/pf/sc.png" class="w-[60rpx] h-[60rpx] rounded-[50%]"></image>
                            <text class="mr-[12rpx]">要收多少钱？</text>
                        </view>
                    </view>
                </view> -->

                <view class="bg-[#fff] rounded-[20rpx] mb-[24rpx] pt-[20rpx]  pb-[30rpx] pl-[14rpx]">
                    <view class="flex justify-between items-baseline">
                        <view class="relative text-[32rpx]  mb-[20rpx] font-[500] text-[#000] flex">
                            <text class="z-[1]">车源推荐</text>
                            <text class="absolute bottom-0 bg-[#FFEFB8] left-0 w-[84rpx] h-[8rpx]"></text>
                        </view>
                    </view>
                    <view class="w-[100%] overflow-auto">
                        <view class="flex items-center">
                            <template v-if="carList.length > 0">
                                <view v-for="item in carList" :key="item.brandModel" class="w-[236rpx] mr-[16rpx] flex flex-col">
                                <image
                                    :src="item?.image?.split(',')[0]"
                                    class="w-[236rpx] h-[144rpx]"></image>
                                <view
                                    class="mt-[10rpx] mb-[4rpx] w-[100%] text-ellipsis whitespace-nowrap overflow-hidden">
                                   {{ item?.brandModel }}
                                    530Li 3</view>
                                <view class="text-[28rpx] text-[#ff0000]">
                                    ¥****万
                                </view>
                            </view>
                            </template>
                        </view>
                    </view>

                </view>

                <view class="bg-[#fff] rounded-[20rpx] mb-[24rpx] pt-[20rpx]  pb-[28rpx] px-[16rpx]">
                    <view class="flex justify-between items-baseline">
                        <view class="relative text-[32rpx]  mb-[20rpx] font-[500] text-[#000] flex">
                            <text class="z-[1]">车辆实拍</text>
                            <text class="absolute bottom-0 bg-[#FFEFB8] left-0 w-[84rpx] h-[8rpx]"></text>
                        </view>
                    </view>
                    <view class="mt-[18rpx] w-[100%]">
                        <view v-for="item in swiper" :key="item" class="w-[100%] mb-[18rpx]">
                            <image
                                :src="item"
                                class="w-[100%]" mode="widthFix">
                            </image>
                        </view>
                    </view>
                </view>

                <view class="bg-[#fff] rounded-[20rpx] mb-[24rpx] pt-[20rpx]  pb-[8rpx] px-[16rpx]">
                    <view class="flex justify-between items-baseline">
                        <view class="relative text-[32rpx]  mb-[20rpx] font-[500] text-[#000] flex">
                            <text class="z-[1]">卖家信息</text>
                            <text class="absolute bottom-0 bg-[#FFEFB8] left-0 w-[84rpx] h-[8rpx]"></text>
                        </view>
                    </view>
                    <view @click="push('/pages_qc/my_car_source/index')">
                        <view class="w-[100%] mt-[24rpx] py-[24rpx] px-[16rpx] bg-[#f5f5f5] rounded-[20rpx]">
                            <view class="flex justify-between mb-[20rpx] items-center">
                                <view class="text-[28rpx] text-[#000] flex items-center">
                                    四星级会员
                                    <image src="/static/images/pf/hg.png" class="w-[55rpx] h-[27.5rpx] ml-[12rpx]">
                                    </image>
                                </view>
                                <view class="flex items-baseline">
                                    <!-- <text class="text-[#9A9A9A] text-[24rpx] mr-[8rpx]">在售32辆</text> -->
                                    <up-icon name="arrow-right" color="#9A9A9A" size="21rpx"></up-icon>
                                </view>
                            </view>
                            <view class="flex">
                                <up-avatar :src="item?.avatar" size="92rpx"></up-avatar>
                                <view class="flex-1 flex ml-[22rpx] flex-col overflow-hidden">
                                    <view
                                        class="text-[24rpx] leading-[48rpx] text-[#000] w-[100%] text-ellipsis whitespace-nowrap overflow-hidden">
                                       {{ item?.userName }}
                                    </view>
                                    <view class="flex flex-wrap">
                                        <view
                                            class="p-[10rpx] mr-[8rpx] bg-[#FFEFB8] rounded-[8rpx] text-[#000] text-[20rpx]">
                                            信誉值:100
                                        </view>
                                        <view
                                            class="p-[10rpx] mr-[8rpx] bg-[#FFDBB1] rounded-[8rpx] text-[#000] text-[20rpx]">
                                            认证车商
                                        </view>
                                        <view
                                            class="p-[10rpx] mr-[8rpx] bg-[#B1ECFF] rounded-[8rpx] text-[#000] text-[20rpx]">
                                            工商认证
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="mt-[28rpx] flex items-center text-[#999999] leading-[40rpx] text-[22rpx]">
                                <up-icon name="map" color="#9A9A9A" size="21rpx"></up-icon>
                                <text class="ml-[8rpx]">湖北省武汉市洪山区</text>
                            </view>
                        </view>

                    </view>
                    <!-- <view class="my-[24rpx] flex justify-between items-center">
                        <view class="flex">
                            <text class="text-[52rpx] text-[#000] font-bold">5.0</text>
                            <view class="flex flex-col ml-[12rpx]">
                                <up-rate :count="5" readonly size="24rpx" activeColor="#FFBC17"
                                    inactiveColor="#D8D8D8"></up-rate>
                                <text class="text-[#B4B4B4] text-[20rpx] mt-[4rpx]">32人评价</text>
                            </view>
                        </view>
                        <view class="flex items-baseline">
                            <text class="text-[#9A9A9A] text-[24rpx] mr-[8rpx]">查看全部评价</text>
                            <up-icon name="arrow-right" color="#9A9A9A" size="21rpx"></up-icon>
                        </view>
                    </view>
                    <view class="flex flex-wrap ">
                        <view
                            class="px-[28rpx] mr-[16rpx] rounded-[36rpx] flex justify-center items-center py-[12rpx] bg-[#F5F5F5] text-[#9A9A9A] text-[24rpx]">
                            服务态度好1
                        </view>
                        <view
                            class="px-[28rpx] rounded-[36rpx] flex justify-center items-center py-[12rpx] bg-[#F5F5F5] text-[#9A9A9A] text-[24rpx]">
                            包过户1
                        </view>
                    </view> -->
                </view>
            </view>
        </view>
    </view>
    <view class="w-[100%] flex items-center h-[176rpx] bg-[#fff]  px-[32rpx] fixed bottom-0 z-[9]">
        <view @click="kfa" class="flex mr-[20rpx] flex-col justify-center items-center">
            <image src="/static/images/pf/list.png" class="w-[52rpx] h-[52rpx]"></image>
            <text class="text-[#000] text-[20rpx]  font-[400]">帮他下架</text>
        </view>
        <view  @click="kfa" class="flex mr-[34rpx] flex-col justify-center items-center">
            <image src="/static/images/pf/zf.png" class="w-[52rpx] h-[52rpx]"></image>
            <text class="text-[#000] text-[20rpx] font-[400]">分享赚钱</text>
        </view>
        <view @click="kfa" style="background: linear-gradient(98deg,#454545 0%,#000000 100%)"
            class="rounded-[16rpx] mr-[24rpx] w-[216rpx] h-[88rpx] flex  justify-center items-center text-[32rpx] text-[#FFEFB8]">
            定金保障</view>
        <view @click="makePhoneCall" style="background: linear-gradient(98deg,#454545 0%,#000000 100%)"
            class="rounded-[16rpx] w-[216rpx] h-[88rpx] flex justify-center  items-center text-[32rpx] text-[#FFEFB8]">
            电话联系</view>
         
    </view>
    
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import { whoableDetail, whoableList  } from '@/api/whoable'
const push = (url) =>{
    uni.navigateTo({
        url
    })
}
//提示功能在开发中
const kfa = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none',
    duration: 2000
  })
}
const makePhoneCall = () => {
  if (!carInfo.value.phone) {
    uni.showToast({
      title: '电话号码不可用',
      icon: 'none',
      duration: 2000
    });
    return;
  }
  
  uni.makePhoneCall({
    phoneNumber: carInfo.value.phone,
    success: () => {
      console.log('拨打电话成功');
    },
    fail: (err) => {
      console.error('拨打电话失败', err);
    }
  });
}

const navBack = () => {
    uni.navigateBack()
}
const tabs = ref([
    { name: '信息' },
    { name: '描述' },
    { name: '报告' },
    { name: '归属' },
    { name: '推荐' },
    { name: '实拍' },
])
const tabsClick = (e) => {
    console.log(e);
}
// 轮播图数组
const swiperCurrent = ref(0);
const swiper = ref([]);
// 车辆信息
const cardInfo = ref([
    [
        {
            title: '上牌时间',
            keyName: 'registrationDate',
            content: ''
        },
        {
            title: '表显里程',
            keyName: 'mileage',
            content: ''
        },
        {
            title: '变速箱',
            keyName: 'transmissionType',
            content: ''
        },
    ],
    [
        {
            title: '排量',
            keyName: 'displacement',
            content: ''
        },
        {
            title: '车辆颜色',
            keyName: 'color',
            content: ''
        },
        {
            title: '排放标准',
            keyName: 'emissionStandard',
            content: ''
        },
    ],
    [
        {
            title: '品牌',
            keyName: 'brand',
            content: '合资'
        },
        // {
        //     title: '车辆类型',
        //     keyName: '',
        //     content: '越野车/SUV'
        // },
        // {
        //     title: '新车指导价',
        //     keyName: '',
        //     content: '38.5万'
        // },
    ],
    // [
    //     {
    //         title: '能源类型',
    //         keyName: '',
    //         content: '汽油'
    //     },
    //     {
    //         title: '强险到期',
    //         keyName: '',
    //         content: '2020-01-01'
    //     },
    //     {
    //         title: '车辆位置',
    //         keyName: '',
    //         content: '武汉-江夏'
    //     },
    // ],
])

// 页面滚动
const scrollTop = ref(0);
const onScroll = (e) => {
    scrollTop.value = e.detail.scrollTop;
}
// rpx转px比例
const windowWidth = ref(2);
const statusBarHeight = ref(44)
onLoad((e) => {
    uni.getSystemInfo({
        success: (res) => {
            windowWidth.value = (750 / res.windowWidth).toFixed(3)
            statusBarHeight.value = res.statusBarHeight
            console.log(res)
        },
    })
})
onPageScroll((e) => {
    if (e.scrollTop < 475 / windowWidth.value) {
        scrollTop.value = e.scrollTop * windowWidth.value / 475;
    } else {
        scrollTop.value = 1
    }
})
const carInfo = ref({})
const carList = ref([])
onLoad(async options => {
    console.log(options);
    const{ data }=  await whoableDetail({
        id: options.id
    })
    carInfo.value = data
    cardInfo.value.forEach((item,index)=>{
        item.forEach((item2)=>{
            if(item2.keyName == 'displacement'){
                item2.content = data[item2.keyName] + 'T'
            } else if(item2.keyName == '变速箱'){
                item2.content = data[item2.keyName] == 0 ? '手动' : '自动'
            } else if(item2.keyName == 'mileage'){
                item2.content = data[item2.keyName] + '万公里'
            } else {
                item2.content = data[item2.keyName]
            }
        })
    })
    const { rows } =  await whoableList({
        pageNum: 1,
        pageSize: 5,
        informationType: 2,
        brand: data.brand
    })
    carList.value = rows
    swiper.value = data?.image?.split(',')
})
</script>
<style lang="scss" scoped>
.clip-sjx {
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.donghua {
    transition: all 0.5s ease-in-out;
    // opacity: 1;
    // &.fade-enter-active,
    // &.fade-leave-active {
    //     transition: opacity 0.3s ease;
    // }
    // &.fade-enter-from,
    // &.fade-leave-to {
    //     opacity: 0;
    // }
}
</style>